<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/detail.css">
    <script src="./js/jquery-1.12.4.js"></script>
   <script src="./js/layer/layer.js"></script>
    <script src="./js/jquery.cookie.js"></script>
    <script src="./js/detail.js"></script>
    <style>
        .i1 {
            background: url(./banggou/serch.png)no-repeat;
        }

        .logo2 {
            background: url(./banggou/mbshop_new_logo2.png)no-repeat;
        }

        .a1 {
            background: url(./banggou/Veo_mbshop_spirit_pic.png) 0 -1060px no-repeat;
        }

        .a2 {
            background: url(./banggou/online_service.png) no-repeat
        }

        .dsb {
            border: 2px solid red;
        }
    </style>
    <script>
        
$(function(){
    var pid = window.location.href.split("?")[1].split("=")[1];
        $.ajax({
            url: `./api/goodsbyid/${pid}`,
            type: "get"
        }).then(function (res) {
            var {
                data
            } = res;
            console.log(data)
            var strHtml = `
            <div class="st1 float_l">
        <div id="middleImg">
           <div>   <div>`
                data.loupeMiddle1.forEach(el=>{
                    strHtml+=` <img src="${el}" class="im1">`
                })            
         strHtml+=   `  </div>
            <img src="${data.loupeMiddleI}" class="im2">
            <img src="${data.loupeMiddle3}" class="im3">
            </div>
            <div id="middleArea"></div>
        </div>

        <div id="small">
            <ul class="u1">`
            data.loupesmall.forEach(el => {
                strHtml += `  <li><img src="${el}"></li>`
            })


            strHtml += `
              
            </ul>
        </div>
        <div id="bigArea"><div>`
            data.lohpeBig.forEach(el=>{
                strHtml+=`  <img id="bigImg" src="${el}">`
            })
            
        strHtml+=  `</div>
          
        </div>
    </div>
    <ul class="st2 float_l">
        <p class="m1">${data.pname}</p>
        <div class="m2">
            <p class="q1">
                <span class="s1 float_l">售价:</span>
                <span class="s2 ">￥${data.pprice}</span>
            </p>
            <div class="q2">
                <span class="float_l s3">本品不参加会员折扣</span>
                <a class="float_r" class="a">会员规则</a>
                <p class="yxr"><span class="yxr1">成长值是根据用户近12个月在邦购商城的账户信息、消费金额、活跃互动等方面行为，综合算出的分值。分值每天更新，每季度1日结算最近12个月分值。具体等级划分请参考个人中心 - 会员等级 页面</span></p>
            </div>
        </div>
        <ul class="m3">
            <li>销量<span>0</span></li>
            <li>累计评价<span>0</span></li>
            <li>送邦购积分<span>1199</span></li>
        </ul>
        <div class="m4">
            <p>颜色：<span>请选择颜色</span></p>
            <ul class="u2">
                
                <li class="x1">`
                data.color1.forEach(el=>{
                    strHtml+=` <img src="${el.img}" title="${el.title}">`
                })   
               
                strHtml+=`</li>
                <li class="x2">`

                   data.color2.forEach(el=>{
                       strHtml+=`<img src="${el.img}">`
                   }) 
                strHtml+=`</li>
                
                
                
             
               
            </ul>
        </div>
        <div class="m5">
            <p>尺码：<span>请选择尺码</span></p>
            <ul class="u3">`
            data.sizes.forEach(el => {
                strHtml += `<li class="">${el}</li>`
            })


            strHtml += `
               
            </ul>
        </div>
        <p class="m6 ">
            <span class="float_l"> 购买数量：</span>
            <span class="jian float_l" id="jian">-</span>
            <span class="float_l jian1">1</span>
            <span class="float_l jian" id="jia">+</span>
            <span class="y1">对不起，数量至少为1件</span>
        </p>
        <p class="mm7">
            加入购物车
        </p>
        <div class="m9">
            <p>浏览更多：<span class="cm">羽绒服</span></p>

        </div>
        <div class="m8 ">
            <span class="float_l">温馨提示：</span>
            <ul class="uu1 ">
                <li>此商品不可使用邦购红包</li>
                <li>此商品不可使用积分</li>
                <li>14天退换</li>
            </ul>

        </div>
            `
            $(".box4").html(strHtml)


            $("body").on("click",".u3 li",function(){
       $(this).addClass("dsb1").siblings().removeClass("dsb1");
   })
    var num = 0
   $("body").on("click",".mm7",function () {
    if($(".u2").find(".dsb").length<=0) {
        alert("请选择颜色");
        return;
    }
    if($(".u3").find(".dsb1").length<=0){
        alert("请选择尺码");
        return;
    }
        num++
        var zln = $(".dsb").position()
        var target = $(".yxr_sp").position()
        console.log(target)
        var $cloneImg = $(".dsb").clone(true);
        $cloneImg.css({
            position: "absolute",
            left: zln.left,
            top: zln.top
        })
        $(".u2").append($cloneImg);
        $cloneImg.animate({
            top: target.top + 10,
            left: target.left + 10,
            width: 0,
            height: 0
        }, 1000, function () {
            $cloneImg.remove();
            var obj={
                    pid:pid,//产品id
                    pname:$(".box4 .st2 .m1").text(),//产品名称
                    pprice:data.pprice,//产品价格
                    pnum:$(".m6 .jian1").text(),//产品数量
                    //购买人
                    uid:JSON.parse($.cookie("loginInfo"))[0].uid,
                    psize:$(".u3").find(".dsb1").text()
                }
                console.log(obj);
                $.ajax({
                    url:'/api/addCart',
                    type:"post",
                    data:obj
                }).then(function(res){
                    console.log(res)
                    // layer.msg(res.msg,{
                    //     icon:res.status ==1?6:5
                      
                    // })

                    if(res.status==1){
                   
                    layer.msg("登录成功",{
                        icon:6
                        
                    });
                    window.location="shop.html";
                }else{
                    layer.msg("登录失败",{
                        icon:5
                    });
                }
                    
                })

            $(".yxr_sp").css("color", "red").html(num)
        })
    })
            
           
        

        })



})

    </script>
    
</head>
<div class="nav2">
    <div class="le1 float_l">
        <img src="./images/631113_00.jpg" class="le2 float_l">
        <p class="le3">
            <span>[冬季新品] 男潮流撞色织带装饰连帽羽绒服</span>
            <span>￥1199</span>
        </p>

    </div>
    <ul class="yb1 le4 float_l">
        <li>商品详情<img src="images/indexline.png"></li>

        <li>商品评价(0)<img src="./images/indexline.png"></li>
        <li>购买须知</li>
    </ul>
    <p class="float_l le5">选择商品信息</p>
</div>
<div class="header ">
    <div class="line1">
        <div class="main clearfix">
            <div class="left fl">
                欢迎来到邦购网，全场实付满99元包邮，本网站多为断码限量商品，支持14天无理由退换货，不支持退差价，感谢理解。
            </div>
            <div class="right">
                <ul class="clearfix">
                    <li class="c1">
                        <a class="yxr">登录</a>
                        <div class="ri1">
                            <ul>
                                <li>
                                    <a>QQ账户登录</a>
                                    <a>支付宝登录</a>
                                    <a>微信账户登录</a>
                                </li>

                            </ul>
                        </div>
                    </li>
                    <li><a href="register.html">注册</a></li>
                    <li class="c1 c2">我都邦购
                        <div class="bor"></div>
                        <div class=" ri1 ri2">
                            <ul>
                                <li>
                                    <a>我的订单</a>
                                    <a>我的积分</a>
                                    <a>我的点赞</a>
                                    <a>收货地址</a>
                                </li>

                            </ul>
                        </div>
                    </li>
                    <li>会员中心</li>
                    <li class="c1 c3"><img src="./banggou/Iphone-vertical.png" alt=""> 下载APP
                        <div class="bor"></div>
                        <img src="./images/mbshop_pic_mobile.png" class="ri1 ri3">
                    </li>
                    <li class="c4">
                        微博
                        <span class="ri4">新浪微博</span>
                    </li>
                    <li class="c1 ">
                        微信
                        <img src="./images/mbshop_pic_mobile.png" class="ri1 ri3 ri5">
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="line2">
        <div class="main clearfix">
            <div class="logo2 fl">
            </div>
            <div class="inp1 fl clearfix">
                <input type="text" value="新款大衣">
                <div class="inp fl">
                    <i class="i1"></i> 搜索
                </div>
            </div>
            <ul>
                <li>羽绒服</li>
                <li class="li1">毛衣</li>
                <li>外套</li>
                <li class="li2">牛仔裤</li>
            </ul>
            <div class="gouwu">
                <p>
                    <span class="float_l">购物袋</span>
                    <span class="float_l yxr_sp">0</span>
                    <span class="float_l">件</span>
                </p>
            </div>
        </div>
    </div>

    <div class="line3">
        <div class="main clearfix">
            <ul class="fl">
                <li>首页</li>
                <li class="n1 clearfix">
                    男装
                    <div class="none_01 fl ">
                        <ul class="no1 fl">
                            <li>上装</li>
                            <li>卫衣</li>
                            <li>长袖衬衫</li>
                            <li>夹克</li>
                            <li>毛衣</li>
                            <li>西装</li>
                            <li>风衣</li>
                            <li>大衣</li>
                            <li>羽绒服</li>
                            <li>短袖T恤</li>
                            <li>短袖衬衫</li>
                            <li>长袖T恤</li>
                        </ul>
                        <ul class="no1 no2 fl">
                            <li>下装</li>
                            <li>牛仔长裤</li>
                            <li>休闲长裤</li>
                            <li>针织休闲裤</li>
                            <li>西裤</li>
                            <li>牛仔中短裤</li>
                            <li>休闲中短裤</li>
                            <li>针织中短裤</li>
                        </ul>
                    </div>

                </li>
                <li class="clearfix">
                    女装
                    <div class="none_01 none_02 fl">
                        <ul class="no1 fl">
                            <li>上装</li>
                            <li>长袖衬衫</li>
                            <li>卫衣</li>
                            <li>毛衣</li>
                            <li>夹克</li>
                            <li>风衣</li>
                            <li>大衣</li>
                            <li>棉服</li>
                            <li>羽绒服</li>
                            <li>短袖T恤</li>
                            <li>短袖衬衫</li>
                            <li>长袖T恤</li>
                        </ul>
                        <ul class="no1 no2 no3 fl">
                            <li>下装</li>
                            <li>牛仔长裤</li>
                            <li>休闲长裤</li>
                            <li>针织裤</li>
                            <li>连身裤</li>
                            <li>牛仔中短裤</li>
                            <li>休闲中短裤</li>
                        </ul>
                        <ul class="no1 no2 no3 fl">
                            <li>裙装</li>
                            <li>连衣裙</li>
                            <li>半身裙</li>

                        </ul>
                        <ul class="no1 no2 fl">
                            <li>内衣</li>
                            <li>内衣上装</li>
                            <li>内衣下装</li>
                            <li>家居服</li>
                            <li>袜子</li>
                        </ul>
                    </div>
                </li>
                <li>
                    儿童
                    <div class="none_01 none_02 none_03 fl">
                        <ul class="no1 fl">
                            <li>男童</li>
                            <li>衬衫</li>
                            <li>卫衣</li>
                            <li>外套</li>
                            <li>长裤</li>
                            <li>鞋包配</li>
                            <li>T恤</li>
                            <li>中短裤</li>

                        </ul>
                        <ul class="no1 no2 no3 fl">
                            <li>女童</li>
                            <li>衬衫</li>
                            <li>卫衣</li>
                            <li>外套</li>
                            <li>裙装</li>
                            <li>长裤</li>
                            <li>鞋包配</li>
                            <li>T恤</li>
                            <li>中短裤</li>
                        </ul>
                        <ul class="no1 no2 fl">
                            <li>婴幼童</li>
                            <li>连体衣</li>
                            <li>套装</li>
                            <li>下装</li>
                            <li>上装</li>
                        </ul>
                    </div>
                </li>
                <li>
                    鞋履
                    <div class="none_01 none_02 none_03 none_04 fl">
                        <ul class="no1 fl">
                            <li>人气男鞋</li>
                            <li>休闲鞋</li>
                            <li>运动鞋</li>
                            <li>商务鞋</li>
                            <li>帆布鞋</li>
                            <li>靴子</li>
                            <li>凉/拖鞋</li>
                        </ul>
                        <ul class="no1 no2 fl">
                            <li>人气女鞋</li>
                            <li>休闲鞋</li>
                            <li>运动鞋</li>
                            <li>商务鞋</li>
                            <li>帆布鞋</li>
                            <li>靴子</li>
                            <li>凉/拖鞋</li>
                        </ul>
                    </div>
                </li>
                <li>
                    箱包
                    <div class="none_01 none_02 none_03 none_04 none_05 fl">
                        <ul class="no1 fl">
                            <li>品质男包</li>
                            <li>钱包/手拿包</li>
                            <li>胸包</li>
                            <li>双肩包</li>

                        </ul>
                        <ul class="no1 no2 fl">
                            <li>潮流女包</li>
                            <li>单肩包</li>
                            <li>双肩包</li>
                            <li>斜挎包</li>
                            <li>钱包/手拿包</li>
                            <li>手提包</li>
                            <li>胸包/腰包</li>
                        </ul>
                    </div>
                </li>
                <li>
                    配饰
                    <div class="none_01 none_02 none_03 none_04 none_05 none_06 fl">
                        <ul class="no1 no2 ">
                            <li>配饰</li>
                            <li>帽子</li>
                            <li>围巾/丝巾/披肩</li>
                            <li>腰带/皮带</li>
                            <li>其他配饰</li>
                            <li>腕表</li>
                        </ul>
                    </div>
                </li>
            </ul>


            <div class="fr">
                <img src="./banggou/pcsyfl_2.png" alt="">
                <img src="./banggou/pcsyfl_4.png" alt="">
                <img src="./banggou/pcxgxdyg.gif" alt="">
            </div>
        </div>
    </div>
</div>
</div>

<div class="box4 main">

</div>

<ul class="box5 main">
    <li>商品编号：631113</li>
    <li><img src="./images/fx1.gif">分享</li>
    <li><img src="./images/fx2.gif">点赞</li>
</ul>
</div>
<div class="box6 main clearfixed">
    <div class="zb float_l">
        <div class="zb1">
            <p class="z3">最近浏览的商品</p>
            <div class="zb2">
                <img src="./images/631113_00.jpg" class="z1">
                <p class="z2">[冬季新品] 男潮流撞色织带装饰连帽羽绒服</p>
                <p class="z2 z4">￥1199</p>
            </div>
        </div>
    </div>
    <div class="yb float_l">
        <ul class="yb1">
            <li>商品详情<img src="./images/indexline.png"></li>
            <li>商品评价(0)<img src="./images/indexline.png"></li>
            <li>购买须知</li>
        </ul>
        <div class="yb2">
            <p class="top1">商品信息</p>
            <ul class="top2">
                <li class="li1">品牌：<span>Metersbonwe</span></li>
                <li class="li2">款名：<span>男潮流撞色织带装饰连帽羽绒服</span></li>
                <li>款号：<span>631113</span></li>
                <li class="li3">分类：<span>Metersbonwe > 羽绒服</span></li>
                <li class="li4">吊牌价：<span>1199.00</span></li>
                <li class="li5">颜色：<span>银灰</span></li>
                <li>尺码：<span>175/84A</span></li>
            </ul>
            <p class="top3">品牌介绍</p>
            <p class="top4">美特斯邦威，不走寻常路！旨在为18-25岁的年轻消费者打造个性、流行的服饰产品，立志成为中国休闲服市场的领导品牌！</p>
            <p class="top3">模特展示</p>
            <img src="./images/1.jpg" class="img1">
            <img src="./images/2.jpg" class="img2">
            <img src="./images/3.jpg" class="img2">
            <img src="./images/4.jpg" class="img2">
            <img src="./images/5.jpg" class="img2">
            <img src="./images/6.jpg" class="img2">
            <img src="./images/7.jpg" class="img2">
            <img src="./images/8.jpg" class="img2">
            <p class="top3">细节展示</p>
            <img src="./images/01.jpg">
            <img src="./images/02.jpg">
            <img src="./images/03.jpg">
            <img src="./images/04.jpg">
            <img src="./images/05.jpg">
            <img src="./images/06.jpg">
            <p class="top5">颜色选择</p>
            <div class="top6 ">
                <p class="to1">
                    <img src="./images/im1.jpg"><span>影黑</span>
                </p>

                <p class="to2">
                    <img src="./images/im2.jpg"><span>希望银</span>
                </p>
            </div>
            <img src="./images/img1.jpg">
        </div>
        <img src="./images/img2.jpg" class="to3">
        <img src="./images/img4.jpg" class="to3">
        <div class="top7">
            <p class="to4">顾客评论</p>
            <ul class="to5">
                <li class="t1">
                    商品满意度<span>0</span>分 共0人评分

                </li>
                <li class="t2">
                    <img src="./images/indexline.png">
                </li>

                <li class="t3">
                    <p class="sp1">商品满意度</p>
                    <p class="sp2">★★★★★</p>
                </li>
                <li class="t4">
                    <img src="./images/indexline.png">
                </li>
                <li class="t5">
                    <p class="sp1">该宝贝怎么样</p>
                    <p>发表评价最高可获得<span class="">110</span>个积分</p>
                </li>
            </ul>
            <ul class="pl1">
                <li>
                    0位用户认为实际尺码最小
                </li>
                <li>
                    0位用户认为实际尺码最合适
                </li>
                <li>
                    0位用户认为实际尺码偏大
                </li>
            </ul>
            <p class="pl2">
                全部评论(0)
            </p>
            <p class="pl3">
                暂无数据
            </p>

        </div>
        <div class="pl4">
            <p class="cm1">尺码误差</p>
            <p class="cm2">由于尺寸是我们手工测量，可能存在1-2厘米的误差，如果不能接受误差的朋友们勿拍。</p>
        </div>
        <div class="pl5">
            <p class="cm1">色差问题</p>
            <p class="cm2">网络购物色差难以避免，我们尽量做到最小色差，完全不能接受色差的朋友请谨慎购买，以免收到货后发生纠纷。</p>
        </div>
        <div class="pl5">
            <p class="cm1">运货方式</p>
            <p class="cm2">江浙沪快递方式费用6元，除江浙沪外全国其他地区普通快递10元，EMS15元起，系统将根据邮编自动匹配快递。</p>
        </div>
        <div class="pl5">
            <p class="cm1">收货提醒</p>
            <p class="cm2">请务必在签收快递的时候确认商品完好无损后在签收，如发现缺货、少货可拒绝签单并联系邦购客服。</p>
        </div>
        <div class="pl5">
            <p class="cm1">发货方式</p>
            <p class="cm2">全年无休，假日能发货，晚间会根据订单及快递规律做相应机动延迟。</p>
        </div>
        <div class="pl5">
            <p class="cm1">发票问题</p>
            <p class="cm2">如需开具发票，请提交订单时选择需要发票，否则视为不需要。</p>
        </div>
        <div class="pl5">
            <p class="cm1">付款减库存</p>
            <p class="cm2">邦购网库存机制为付款后减库存，购买成功以买家付款到邦购网时间为准，拍下不付款的商品无法保留其购买权利。</p>
        </div>
        <div class="pl6">
            <p class="cm1">退换货问题</p>
            <p class="cm2">如果您的订单需要办理退换货，请您务必先通过电话或在线客服的方式与邦购客服中心联系。客服人员会帮您登记退换货单。 内衣、内裤以及袜子此类贴身产品一经购买如无质量问题不予以退换。
            </p>
        </div>
    </div>
</div>
<div class="box8 main clearfixed">

    <img src="./images/zyshare01.png" class="tp1 float_l">


    <img src="./images/zyshare02.png" class="tp2 float_l">

    <img src="./images/zyshare03.png" class="tp2 float_l">
    <div class="tp3 float_l">
        <img src="./images/zsss.jpg" class="i2">
        <ul class="ig1">
            <li class="ii1 float_l">
                <img src="./images/indexonline (1).png">
                <p>在线客服</p>
            </li>
            <li class="ii1 float_l">
                <img src="./images/indexopinion (1).png">
                <p>意见反馈</p>
            <li class="i3 float_l">
                <img src="./images/indexsurvey (1).png">
                <p>问卷调查</p>
            </li>
            </li>
        </ul>
    </div>
</div>

<div class="box9 ">
    <p class="main xx1">联系方式</p>
</div>
<div class="box10 main">
    <p class="xx2">在线客服</p>
    <p>咨询电话：4008219988</p>
</div>
<div class="box11 main">
    <p class="xx3">CopyRight © 2000-2019,版权所有 上海美特斯邦威服饰股份有限公司沪ICP备05033127号|沪ICP证B2-20150114021-38119999 营业执照
    </p>
    <img src="./images/lz_beian_h40.png" class="be1">
    <img src="./images/lz_shgs_h40.png" class="be2">
    <img src="./images/brand_bottom_small.jpg">
</div>
<div class="huojian">
    <a class="a1" href="javascript:void(0)" id="a1">
    </a>
    <a href="" class="a2"></a>


</div>
</body>

</html>